<template>
  <div class="divMain1">
    <!-- 模糊查询 -->
    <div class="mainTop1">
      <el-form :v-model="queryWarning">
        <div class="divInputAll1">
          <!-- 输入框 -->
          <div class="divInput1">
            <div class="inputFont1">设备名称：</div>
            <div style="float: left">
              <el-input
                size="mini"
                placeholder="请输入内容"
                v-model="queryWarning.equipmentName"
              >
              </el-input>
            </div>
          </div>
          <div class="divInput">
            <div class="inputFont1">设备编号：</div>
            <div style="float: left">
              <el-input
                size="mini"
                placeholder="请输入内容"
                v-model="queryWarning.equipmentNum"
              >
              </el-input>
            </div>
          </div>
          <div class="divSelect1">
            <div class="inputFont1">告警类型：</div>
            <div style="float: left">
              <el-select
                size="mini"
                v-model="queryWarning.faultId"
                placeholder="请选择"
                reserve-keyword="true"
              >
                <el-option
                  v-for="item in faults"
                  :key="item.faultId"
                  :label="item.falutName"
                  :value="item.faultId"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="likeBtn1">
            <el-button
              size="mini"
              type="success"
              icon="el-icon-search"
              @click="newLoadWarning"
              >查询</el-button
            >
            <el-button size="mini" plain @click="reLoadWarning">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>

    <!-- 查所有 -->
    <div class="divSelAll1">
      <el-table
        ref="multipleTable"
        :data="warningList"
        border
        style="width: 100%; font-size: xx-small; margin: auto"
        :row-style="{ height: '22px' }"
        :cell-style="{ padding: '1px' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" prop="warningId" width="46">
        </el-table-column>
        <el-table-column prop="equipmentId" v-if="false"></el-table-column>
        <el-table-column prop="equipmentName" label="设备名称" width="120">
        </el-table-column>
        <el-table-column prop="equipmentNum" label="设备编号" width="100">
        </el-table-column>
        <el-table-column prop="equipmentPlace" label="告警位置" width="150">
        </el-table-column>
        <el-table-column prop="warningName" label="告警内容" width="190">
        </el-table-column>
        <el-table-column prop="falutName" label="告警类型" width="90">
        </el-table-column>
        <el-table-column
          prop="warningStatus"
          :formatter="stateFormat"
          label="处置状态"
          width="100"
        >
        </el-table-column>
        <el-table-column prop="warningTime" label="告警时间" width="180">
        </el-table-column>

        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row.equipmentId)"
              type="text"
              size="small"
              >详情</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.row.warningId)"
              >删除</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.warningStatus === 1"
              @click="handleTask(scope.row.warningId)"
              >派单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 展示模态框 -->
      <el-dialog
        :visible.sync="dialogShow"
        @close="closeDialogShow"
        fullscreen="true"
      >
        <div class="allDialog">
          <div class="eLeft">
            <div class="mesl">
              <div class="title1">设备基本信息：</div>
              <div class="mesl2">
                <el-form
                  ref="showForm"
                  :rules="rules"
                  label-width="80px"
                  size="mini"
                >
                  <el-form-item label="设备ID" hidden prop="equipmentId">
                    <el-input
                      v-model="showForm.equipmentId"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="设备名称"
                    style="width: 280px"
                    prop="equipmentName"
                  >
                    <el-input
                      v-model="showForm.equipmentName"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="设备编号"
                    style="width: 280px"
                    prop="equipmentNum"
                  >
                    <el-input
                      v-model="showForm.equipmentNum"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="设备型号"
                    style="width: 280px"
                    prop="equipmentModel"
                  >
                    <el-input
                      v-model="showForm.equipmentModel"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="运行时长"
                    style="width: 280px"
                    prop="equipmentTiming"
                  >
                    <el-input
                      v-model="showForm.equipmentTiming"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="运行状态"
                    style="width: 280px"
                    prop="runStateId"
                  >
                    <el-select
                      size="mini"
                      v-model="showForm.runStateId"
                      placeholder="请选择"
                      reserve-keyword="true"
                    >
                      <el-option
                        v-for="item in runStates"
                        :key="item.runStateId"
                        :label="item.runStateName"
                        :value="item.runStateId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="跟进人"
                    style="width: 280px"
                    prop="empName"
                  >
                    <el-input
                      :disabled="true"
                      v-model="showForm.empName"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式" style="width: 280px">
                    <el-input
                      :disabled="true"
                      v-model="showForm.empTel"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="eRight">
            <div class="mesr">
              <div class="title1">设备详细信息：</div>
              <div class="mesr2">
                <el-form
                  ref="showForm"
                  :rules="rules"
                  label-width="80px"
                  size="mini"
                >
                  <el-form-item
                    label="安装位置"
                    style="width: 280px; float: left"
                    prop="equipmentPlace"
                  >
                    <el-input
                      v-model="showForm.equipmentPlace"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="现场照片"
                    style="width: 280px; float: left"
                    prop="equipmentFieldimg"

                  >
                    <el-input
                      v-model="showForm.equipmentFieldimg"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="设备照片"
                    style="width: 280px; float: left"
                    prop="equipmentImg"
                  >
                    <el-input
                      v-model="showForm.equipmentImg"
                      autocomplete="off"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" style="text-align: center">
          <el-button @click="dialogShow = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 派单模态框 -->
    <el-dialog
      :visible.sync="dialogTask"
      @close="closeDialogTask"
      fullscreen="true"
    >
      <div class="allDialog">
        <div class="eLeft">
          <div class="title1">告警处理分配：</div>
          <div class="mesl">
            <div class="mesl2">
              <el-form
                ref="warningForm"
                :rules="rules"
                label-width="80px"
                size="mini"
              >
                <el-form-item label="告警ID" hidden prop="warningId">
                  <el-input
                    v-model="warningForm.warningId"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="设备名称"
                  style="width: 280px"
                  prop="equipmentName"
                >
                  <el-input
                    v-model="warningForm.equipmentName"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="设备编号"
                  style="width: 280px"
                  prop="equipmentNum"
                >
                  <el-input
                    v-model="warningForm.equipmentNum"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="告警类型"
                  style="width: 280px"
                  prop="falutName"
                >
                  <el-input
                    v-model="warningForm.falutName"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="告警时间"
                  style="width: 280px"
                  prop="warningTime"
                >
                  <el-input
                    v-model="warningForm.warningTime"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="处置状态"
                  style="width: 280px"
                  prop="warningStatus"
                >
                  <el-input
                    v-model="warningForm.warningStatus"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                  <el-form-item
                    label="跟进人"
                    style="width: 280px"
                    prop="empId"
                  >
                    <el-select
                      size="mini"
                      v-model="warningForm.empId"
                      placeholder="请选择"
                      reserve-keyword="true"
                      @change="queryByTel(warningForm.empId)"
                    >
                      <el-option
                        v-for="item in admins"
                        :key="item.empId"
                        :label="item.empName"
                        :value="item.empId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="联系方式" style="width: 280px">
                    <el-input
                      :disabled="true"
                      v-model="warningForm.empTel"
                    ></el-input>
                  </el-form-item>

              </el-form>
            </div>
          </div>
        </div>
        <div class="eRight">
          <div class="title1">告警详细信息：</div>
          <div class="mesr">

            <div class="mesr2">
              <div class="opres">
              <el-form
                ref="warningForm"
                :rules="rules"
                label-width="80px"
                size="mini"
              >

                <el-form-item

                  label="处理结果"
                  style="width: 280px; float: left"
                  prop="operationResult"
                >
                  <el-input
                    v-model="warningForm.operationResult"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="现场照片"
                  style="width: 280px; float: left"
                  prop="operationPhoto"
                >
                  <el-input
                    v-model="warningForm.operationPhoto"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
              </el-form>
              </div>
              <div class="mright1">
                <div class="xiangqing">告警位置:{{warningForm.equipmentPlace}}</div>
                <div class="xiangqing">告警内容:{{warningForm.warningName}}</div>
                <div class="xiangqing">报警阈值:{{warningForm.warningThr}}</div>
                <div class="xiangqing">报警时间:{{warningForm.warningTime}}</div>
                <div class="xiangqing">持续时间:{{newTime}}</div>
                <div class="xiangqing">告警等级:{{warningForm.falutLevel}}</div>
              </div>
              <div class="mright2">
                <div class="xiangqing">设备名称:{{warningForm.equipmentName}}</div>
                <div class="xiangqing">设备型号:{{warningForm.equipmentModel}}</div>
                <div class="xiangqing">设备编号:{{warningForm.equipmentNum}}</div>
                <div class="xiangqing">设备厂家:{{warningForm.equipmentFactory}}</div>
                <div class="xiangqing">出场时间:{{warningForm.equipmentBirtime}}</div>
                <div class="xiangqing">产品版本:{{warningForm.equipmentVersion}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" style="text-align: center">
        <el-button @click="dialogTask = false">关闭</el-button>
        <el-button type="primary" @click="newUpdate()">确 定</el-button>
      </div>
    </el-dialog>
    <div class="divPage1">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryWarning.currentPage"
        :page-sizes="[4, 20, 50, 100]"
        :page-size="queryWarning.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

  <script>
export default {
  data() {
    return {
      sysAdmin: {},
      dialogShow: false,
      dialogTask: false,
      warningList: [],
      showForm: [],
      warningForm: [],
      operationForm: [],
      multipleSelection: [],
      queryWarning: {
        currentPage: 1, //当前页
        pageSize: 4, //每页显示的条数
        equipmentName: "",
        equipmentNum: "",
        faultId: "",
      },
      newTime:"",
      faults: [],
      page: {
        total: 0, //总条数
      },
    };
  },
  methods: {
    newLoadWarning(){
      this.queryWarning.currentPage=1;
      this.loadWarning();
    },
    stateFormat(row, column) {
      if (row.warningStatus === 1) {
        return "未派单";
      } else if (row.warningStatus === 2) {
        return "已派单";
      } else {
        return "已处理";
      }
    },
    queryByTel(id) {
      this.$axios.get("admins/" + id).then((res) => {
        if (res.data.code == 200) {
          this.sysAdmin = res.data.data.sysAdmin;
          this.warningForm.empTel = this.sysAdmin.empTel;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    reLoadWarning() {
      this.queryWarning = this.$options.data().queryWarning;
      this.loadWarning();
    },
    loadWarning() {
      this.$axios.post("warnings/queryAll", this.queryWarning).then((res) => {
        if (res.data.code == 200) {
          this.warningList = res.data.data.warningList.list;
          this.page.total = res.data.data.warningList.total;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    loadFault() {
      this.$axios.get("warnings/faults").then((res) => {
        if (res.data.code == 200) {
          this.faults = res.data.data.faults;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //每页显示的条数变化时
    handleSizeChange(val) {
      this.queryWarning.pageSize = val;
      this.loadWarning();
    },
    // 当前页数变化时
    handleCurrentChange(val) {
      this.queryWarning.currentPage = val;
      this.loadWarning();
    },
    handleClick(id) {
      this.$axios.get("equipments/" + id).then((res) => {
        this.dialogShow = true;
        this.showForm = res.data.data.equVO;
      });
    },
    handleDelete(id) {
      this.$axios.delete("warnings/" + id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.loadWarning();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleTask(id) {
      this.$axios.get("warnings/" + id).then((res) => {
        this.dialogTask = true;
        this.warningForm = res.data.data.warning;
        if(res.data.data.warning.warningStatus==1){
          this.warningForm.warningStatus="未派单";
        }else if(res.data.data.warning.warningStatus==2){
          this.warningForm.warningStatus="已派单";
        }else{
          this.warningForm.warningStatus="已处理";
        }
      });
    },
    topath(path) {
      this.$router.push(path);
    },
    newUpdate(){
      if(this.warningForm.warningStatus==="未派单"){
          this.warningForm.warningStatus=1;
        }else if(this.warningForm.warningStatus==="已派单"){
          this.warningForm.warningStatus=2;
        }else{
          this.warningForm.warningStatus=3;
        }
      this.update();
    },
    update() {
      this.$axios.post("warnings/task", this.warningForm).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.dialogTask = false; //关于dialog
          this.$refs.warningForm.resetFields(); //重置form
          this.loadWarning();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getNowTime() {
            var date = new Date();
            var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
            this.newTime = time;
        },
       //根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
       //小于10的拼接上0字符串
        addZero(s) {
            return s < 10 ? ('0' + s) : s;
        },
    },
  mounted() {
    this.loadWarning();
    this.loadFault();
    this.getNowTime();//进入页面调用该方法获取当前时间
        clearInterval(myTimeDisplay );//销毁之前定时器
        var myTimeDisplay = setInterval(() => {
           this.getNowTime(); //每秒更新一次时间
        }, 1000);
  },
  props: ["runStates", "admins"],
};
</script>
<style >
  .opres{
    border: 0px solid red;
    width: 97%;
    height: 25%;
  }
  .mright1{
    border: 1px solid rgb(119, 118, 118);
    width: 90%;
    height: 33%;
    margin-top: 40px;
    margin-left: 30px;
    border-radius: 10px;
  }
  .mright2{
    border: 1px solid rgb(119, 118, 118);
    width: 90%;
    height: 33%;
    margin-top: 10px;
    margin-left: 30px;
    border-radius: 10px;
  }
  .xiangqing{
    border:0px solid red;
    width:30%;
    height: 40%;
    float: left;
    margin-top: 5px;
    margin-left:10px;
    text-align: center;
    line-height: 20px;
    font-size: 10px;

  }
</style>
